<template>
  <el-dialog class="pick-dialog" :title="type=='bzj'?'保证金提现':'余额提现'" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="620px" @close="close">
    <div class="form-box">
      <el-form :model="ruleForm" ref="ruleForm" label-width="auto" :rules="rules" class="demo-ruleForm">
        <el-form-item label="账户类型:" prop="collectionType">
          <el-select v-model="ruleForm.collectionType" @change="typeChange">
            <el-option v-for="(item,key) in commonMaps.accountType" :key="key" :label="item" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现至:" prop="userCollectionInfoId">
          <el-select filterable v-model="ruleForm.userCollectionInfoId">
            <el-option v-for="(item,key) in zfbList" :key="key" :label="item.collectionUserName+item.collectionAccount+item.collectionAccountName" :value="item.id">
              {{item.collectionUserName}}{{item.collectionAccount}}{{item.collectionAccountName}}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="账户名称:" prop="applicantRealName">
          <el-input v-model="ruleForm.applicantRealName" placeholder="请输入账户名称"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="account">
          <el-input v-model="ruleForm.account" placeholder="请输入收款账号"></el-input>
        </el-form-item> -->
        <el-form-item label="提现金额:" prop="applicantAmount" v-if="type!='bzj'">
          <el-input v-model="ruleForm.applicantAmount" placeholder="请输入提现金额"></el-input>
          <div class="tip" v-if="type!='bzj'">最多可提现金额 {{type=='bzj'?shopInfo.marginMoney:  shopInfo.availableMoney||0 }}元。
            <div v-if="type!='bzj'" style="color:red;line-height: 20px;">由于支付渠道收费，提现将收取1%手续费。</div>
          </div>
        </el-form-item>

        <el-form-item label="提现金额:" v-if="type=='bzj'">
          <div>{{type=='bzj'?shopInfo.marginMoney:  shopInfo.availableMoney}}元</div>
        </el-form-item>
      </el-form>
      <div class="center">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认提现</el-button>
      </div>
      <userInfoSure ref="userInfoSure"></userInfoSure>
      <!-- <shimingStep ref="shimingStep"></shimingStep> -->
    </div>
  </el-dialog>
</template>

<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import { mapGetters } from "vuex";
import userInfoSure from "@/views/tenantPages/components/userInfoSure";
// import shimingStep from "@/views/tenantPages/components/shimingStep";
export default {
  name: "",
  components: { userInfoSure },
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },
  data() {
    var priceRule = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入提现金额"));
      } else if (!this.priceReg.test(value)) {
        callback(new Error("请输入正确的提现金额"));
      } else if (
        value >
        (this.type == "bzj"
          ? this.shopInfo.marginMoney
          : this.shopInfo.availableMoney || 0)
      ) {
        callback(
          new Error(
            "提现金额不能超过" +
              (this.type == "bzj"
                ? this.shopInfo.marginMoney
                : this.shopInfo.availableMoney || 0)
          )
        );
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      loading: false,
      type: "", //提现类型 默认是余额，bzj标识保证金
      ruleForm: {
        applicantId: "",
        applicantName: "",
        partyType: "",
        account: "",
        applicantAmount: "",
        applicantRealName: "",
        userCollectionInfoId: "",
        collectionType:'2'
      },
      rules: {
        applicantAmount: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
          { validator: priceRule, trigger: "blur" },
        ],
        account: [{ required: true, message: "请输入", trigger: "blur" }],
        collectionType: [{ required: true, message: "请选择", trigger: "change" }],
        userCollectionInfoId: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        applicantRealName: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
      },
      from: "", //来源
      zfbList: [], //已绑定的收款账户
    };
  },
  created() {},
  methods: {
    open(user, type) {
      this.type = type || "";
      this.loading = false;
      this.ruleForm = {
        applicantId: this.userInfo.userId,
        applicantName: this.userInfo.nickName,
        partyType: 1,
        account: "",
        applicantAmount: "",
        applicantRealName: "",
        userCollectionInfoId: "",
        collectionType:'2'
      };
      this.getList(this.ruleForm.collectionType);

      this.dialogVisible = true;
    },
    // 账户类型改变
    typeChange(e) {
      this.ruleForm.userCollectionInfoId = "";
      this.getList(e);
    },
    // 查询已绑定的收款账户
    async getList(type) {
      let res1 = await myMoneyApi.getBackcardList({
        collectionType: type || "",
        partyType:1
      });
      this.zfbList = res1.rows;
      if (this.zfbList.length == 0) {
        this.$confirm(
          "您还没有绑定 " +
            this.commonMaps.accountType[this.ruleForm.collectionType] +
            " 账户，请先绑定账户",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.close();
            if (this.userInfo.userId == this.shopInfo.adminId) {
              this.$parent.addBackcard();
            }
          })
          .catch(() => {});
      }
    },
    submitForm(formName) {
      if (this.type == "bzj") {
        this.ruleForm.type = 2;
        this.ruleForm.applicantAmount = this.shopInfo.marginMoney;
      } else {
        this.ruleForm.type = 1;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.applicantAmount < 1) {
            return this.$alert("该金额不支持提现！");
          }

          this.loading = true;

          myMoneyApi
            .addTixian(this.ruleForm)
            .then((res) => {
              this.dialogVisible = false;
              this.loading = false;
              if (res.code == 200) {
                this.$alert("提现申请已提交，具体以实际到账为准");
                this.$store.dispatch("GetInfo", true);
                this.$emit("tixianover");
              } else {
                if (res.code == 20012) {
                  if (this.userInfo.userId == this.shopInfo.adminId) {
                    return this.$alert(
                      "店铺未认证，请在首页，店铺LOGO右侧，点击认证按钮进行认证！"
                    );
                  }
                  return this.$alert(
                    "店铺未认证，请在首页，店铺LOGO右侧，点击认证按钮进行认证！"
                  );
                }
              }
            })
            .catch((err) => {
              //console.log("%c Line:148 🥖 err", "color:#e41a6a", err);
              this.loading = false;
              // if(err.code==20010){
              //   // 没签署合同
              //   this.$confirm(err.msg, "提示", {
              //     confirmButtonText: "去签署",
              //     cancelButtonText: "暂不签署",
              //     type: "warning",
              //   })
              //     .then(() => {
              //       this.signFdd()
              //       this.dialogVisible = false;
              //     })
              //     .catch(() => {});
              // }
              // if(err.code==20011){
              //   // 没缴纳保证金
              //   this.$confirm(err.msg, "提示", {
              //     confirmButtonText: "去缴纳",
              //     cancelButtonText: "暂不缴纳",
              //     type: "warning",
              //   })
              //     .then(() => {

              //       this.dialogVisible = false;
              //       this.$router.push({
              //         path:'/shangjiahulian/shopSetting'
              //       })
              //     })
              //     .catch(() => {});
              // }
              if (err.code == 20012) {
                if (this.userInfo.userId == this.shopInfo.adminId) {
                  return this.$alert(
                    "店铺未认证，请在首页，店铺LOGO右侧，点击认证按钮进行认证！"
                  );
                }
                return this.$alert(
                  "店铺未认证，请在首页，店铺LOGO右侧，点击认证按钮进行认证！"
                );
              }
            });
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    // 签署入驻合同
    signFdd() {
      if (this.userInfo.realStatus != 2) {
        return this.tipSm();
      }
      this.$refs.userInfoSure.open();
    },
    tipSm() {
      this.$refs.shimingStep.open();
    },
    close() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.demo-ruleForm {
  padding-right: 20px;
}

.center {
  text-align: center;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
